<template>
  <!--啤酒节弹窗-->
  <up-transition :show="transitionShow">
    <view :class="[name, calssName]" @touchmove.stop.prevent="moveHandle">
      <view class="popup-dialog" :style="{ width: `${width}rpx` }">
        <text class="title">
          {{ title }}
        </text>
        <slot />
      </view>
      <view class="close-btn" @tap="handlePopupDialogCloseClick"> X </view>
    </view>
  </up-transition>
</template>
<script setup>
import { ref, defineProps, defineEmits } from "vue";
import { rpx2px } from "../../utils/utils";

const props = defineProps({
  width: {
    type: Number,
    default: 620,
  },
  title: {
    type: String,
    default: "标题",
  },
  calssName: {
    type: String,
    default: "",
  },
});
let name = "mask";
const transitionShow = ref(true);

const emits = defineEmits(["closeBtnClick"]);
const handlePopupDialogCloseClick = () => {
  emits("closeBtnClick");
};
const moveHandle = () => {};
</script>
<style scoped lang="less">
.mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  .popup-dialog {
    background-color: @color-origin-white;
    border-radius: 20rpx;
    padding: 40rpx 120rpx;
    box-sizing: border-box;

    .title {
      width: 365rpx;
      font-family: "ali-p";
      font-weight: 400;
      font-size: 39rpx;
      color: @color-black-text;
      white-space: nowrap;
    }

    .btn-group {
      display: flex;
      flex-direction: column;
      align-items: center;
      color: @color-blue-text;
      font-family: "ali-p";
      font-size: 31rpx;
      line-height: 39rpx;
      margin-top: 40rpx;

      .btn {
        margin-top: 20rpx;
      }
    }
  }

  .close-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 74rpx;
    height: 74rpx;
    margin-top: 20rpx;
    border: 1px solid @color-origin-white;
    border-radius: 50%;
    background-color: @color-origin-white;
    opacity: 0.85;
    font-size: 29rpx;
    font-family: "ali-m";
    font-weight: 500;
  }
  &.notification {
    .popup-dialog {
      padding: 40rpx 20rpx;
      text-align: center;
    }
  }
}
</style>